<template>
  <view>
    <view class="goods-list">
      <view v-for="(goods, i) in goodsList" :key="i" @click="toGoodsDetail(goods)"><my-goods :goods="goods"></my-goods></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      goodsList: [], // 存储商品列表数据
      total: 0, // 商品列表总的条数
      // 请求参数对象
      queryObj: {
        // 查询关键词
        query: '',
        // 商品分类Id
        cid: '',
        // 页码值
        pagenum: 1,
        // 每页显示多少条数据
        pagesize: 10
      }
    };
  },
  onLoad(options) {
    // 获取到url里面的query参数还有cid参数，获取到以后赋值到data里面的queryObj
    this.queryObj.query = options.query || '';
    this.queryObj.did = options.cid || '';
    this.getGoodsList();
  },
  //  监听上拉触底的事件，请求下一个的数据
  onReachBottom() {
    // 判断数据是否加载完毕？
    // 怎么判断数据加载完毕？
    // 先判断接口是否在请求当中，如果在请求当中，代码return
    // 当前页面上的商品的条数，接口返回了数据库里面商品的总的条数 >=
    if (this.total <= this.queryObj.pagenum * this.queryObj.pagesize) {
      // console.log('数据获取完毕');
      return uni.$showMsg('数据已经加载完毕');
    }
    if (this.isLoading) return;
    // 可以执行上拉触底的操作，节流阀开启
    this.isLoading = true;
    // 请求下一页的数据，页码自增
    this.queryObj.pagenum++;
    // 加载下一个的数据
    this.getGoodsList();
  },
  // 监听下拉刷新，请求数据
  onPullDownRefresh() {
    // 所有的数据重置，获取第一页的数据
    // total变为默认值
    // pagenum 默认值 1
    // goodsList清空
    this.total = 0;
    this.queryObj.pagenum = 1;
    this.goodsList = [];
    this.getGoodsList(() => {
      uni.stopPullDownRefresh();
    });
  },
  methods: {
    toGoodsDetail(goods) {
      // 跳转商品详情，拼接id参数
      uni.navigateTo({
        url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods.goods_id
      });
    },
    async getGoodsList(cb) {
      // undinfed
      const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj);
      // 如果数据校验不通过，进行错误提示
      if (res.meta.status !== 200) return uni.$showMsg();
      // 赋值的操作 >> 商品列表
      // 数据进行拼接 [...老的数据，...新的数据]
      this.goodsList = [...this.goodsList, ...res.message.goods];
      // 列表的total总数
      this.total = res.message.total;
      // 接口请求完毕之后，关闭节流阀
      this.isLoading = false;
      cb?.();
    }
  }
};

// 判断数据是否存在
// const obj = {
//   msg: {
//     age: {
//       info: {
//         a: function() {}
//       }
//     }
//   }
// };

// if (obj.msg && obj.msg.age && obj.msg.age.info && obj.msg.age.info.a) {}
// 可选链运算符
// obj?.msg?.age?.info?.a?.(); // 原地返回undefined
</script>

<style lang="scss"></style>
